<template>
    <div>
        <h1 style="text-align: center;">角色列表</h1>
        <el-button type="primary"
        v-permission="{path: '/role/add', name: '角色添加'}"
        @click="$router.push('/role/add')">新增角色</el-button>
        <el-table
        :data="rolelist"
        style="width: 100%">
            <el-table-column
                prop="name"
                label="角色名称"
                width="180">
            </el-table-column>
            <el-table-column
                label="权限"
                width="180">
                <template slot-scope="scope">
                    <el-tree :data="scope.row.auths" :props="defaultProps"></el-tree>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="180"
            >
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="success"
                    v-permission="{path: 'role/edit', name:'角色修改'}"
                    @click="$router.push('/role/edit/' + scope.row._id)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    v-permission="{path: 'role/edit', name:'角色删除'}"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { roleList, roleDel } from '@/request'
import permission from '@/utils/permission'
export default {
    directives:{
        permission
    },
    data () {
        return {
            dialogVisible:false,
            rolelist:[],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            form:{
                name:''
            }
        }
    },
    methods: {
        async GetRoleList(){
            let data = await roleList()
            this.rolelist = data.data.rolelist
            // console.log(this.rolelist);
            this.rolelist = this.rolelist.filter(item => {
                return item.name != '超级'
            })
        },
        async handleDelete(index, row) {
            this.$confirm('你真的要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    roleDel(row).then(data =>{
                        let { error_code,msg } = data
                            if(error_code === 200 ){
                                this.$message({
                                    type: 'success',
                                    duration: 1500,
                                    message: msg,                                   
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    duration: 1500,
                                    message: msg,
                                })
                            }
                            this.GetRoleList()
                    })    
                    // });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '停止删除'
                });          
            });
            
        },
    },
    created() {
        this.GetRoleList()
    }
}
</script>

<style>
    
</style>
